import EchartsMain from "@/components/common/EchartsMain"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"
import type { AnyObject } from "antd/es/_util/type";
import type { EChartsOption } from "echarts";
import * as echarts from 'echarts/core';






const threeDataSet = (name: string, dataSource: number[], symbolOffset: string[], bgColor: echarts.graphic.LinearGradient, borderColor: string): AnyObject[] => {
  const sideData = dataSource.map(item => item + 4.5)

  return [
    {
      name: name,
      type: 'bar',
      barWidth: '12px',
      itemStyle: {
        normal: {
          color: bgColor
        }
      },
      data: dataSource,
      itmeStyle: {
        borderColor: '#fff'
      }
    },
    {
      name: name,
      tooltip: {
        show: false
      },
      type: 'bar',
      barWidth: '15%',
      itemStyle: {
        normal: {
          color: bgColor
        }
      },
      barGap: 0,
      data: sideData
    },
    {
      tooltip: {
        show: false
      },
      type: 'pictorialBar',
      itemStyle: {
        borderWidth: 1,
        borderColor: borderColor,
        color: borderColor
      },
      symbol: 'path://M 0,0 l 100,0 l -30,60 l -100,0 z',
      symbolSize: [19, '3'],
      symbolOffset: symbolOffset,
      symbolRotate: -1,
      symbolPosition: 'end',
      data: dataSource,
      z: 3
    },
  ] as unknown as AnyObject[]
}

const option: EChartsOption = {
  grid: {
    top: '20%',
    left: '30px',
    bottom: '30px',
    right: '20px'
  },
  legend: {
    selectedMode: false,
    data: [
      {
        name: '安全事件',
      },
      {
        name: '漏洞',
      },
    ],
    top: 12,
    right: 12,
    textStyle: {
      color: 'rgba(197, 227, 255, 0.9)',
      fontStyle: 'normal',
      fontWeight: 400,
      fontFamily: 'Courier New',
      fontSize: 12,
      textShadowColor: 'rgba(0, 0, 0, 0.25)'
    },
  },
  backgroundColor: "#041730",
  tooltip: {
    trigger: 'axis',
    formatter: "{b} : {c}",
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    //坐标轴
    axisLine: {
      lineStyle: {
        color: '#3eb2e8'
      }
    },
    //坐标值标注
    axisLabel: {
      show: true,
    }
  },
  yAxis: {
    //坐标轴
    axisLine: {
      show: false
    },
    //坐标值标注
    axisLabel: {
      show: true,

    },
    //分格线
    splitLine: {
      lineStyle: {
        color: '#4784e8'
      }
    }
  },
  series: [
    ...threeDataSet('安全事件', [220, 182, 191, 234, 290, 330, 310], ['-9', '-3'], new echarts.graphic.LinearGradient(0, 1, 0, 0, [
      {
        offset: 0,
        color: "rgba(255, 255, 255, 0.9)"
      },
      {
        offset: 0.2,
        color: "rgba(77, 170, 255, 0.8)"
      },
      {
        offset: 0.6,
        color: "rgba(24, 144, 255, 1)"
      },
      {
        offset: 1,
        color: "rgba(13, 120, 220, 1)"
      }], false), 'rgba(24, 144, 255, 1)'),
    ...threeDataSet('漏洞', [1, 23, 434, 12, 33, 32, 56], ['9', '-3'], new echarts.graphic.LinearGradient(0, 1, 0, 0, [
      {
        offset: 0,
        color: "rgba(255, 255, 255, 0.9)"
      },
      {
        offset: 0.2,
        color: "rgba(77, 234, 255, 0.8)"
      },
      {
        offset: 0.6,
        color: "rgba(24, 228, 255, 1)"
      },
      {
        offset: 1,
        color: "rgba(163, 244, 255, 1)"
      }], false), 'rgba(24, 228, 255, 1)'),
  ],
};

const JointAnnouncement = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[370px] flex items-center justify-between"
    header={
      <TitleMain title="省内联合通报" />
    }
  >

    <EchartsMain option={option} isNotDefault />


  </ItemMoudle>
}

export default JointAnnouncement